<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
                                     initial-scale=1.0,
                                     maximum-scale=1.0,
                                     user-scalable=no">
	<title>首页</title>
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
	<link rel="stylesheet" href="../css/jquery.fullPage.css">
	 <link rel="stylesheet" type="text/css" href="../css/style.css">
	<link rel="stylesheet" type="text/css" href="../css/styl.css">
	<link href="../css/lyz.calendar.css" rel="stylesheet" type="text/css" />
	<script src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/cropbox.js"></script>
	<script src="../js/lyz.calendar.min.js" type="text/javascript"></script>


</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container-fluid">
	<div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse"
				data-target="#example-navbar-collapse">
			<span class="sr-only">切换导航</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
		<a class="navbar-brand" href="#"><img src="../images/logo.png"></a>
	</div>
	<div class="collapse navbar-collapse" id="example-navbar-collapse">
		<div class="con">
		<ul class="nav navbar-nav" id="menu">
			<li data-menuanchor="page1"><a href="main.html#page1">首页</a></li>
			<li data-menuanchor="page2"><a href="main.html#page2">团队</a></li>
			<li data-menuanchor="page3"><a href="main.html#page3">动态</a></li>
			<li data-menuanchor="page4"><a href="main.html#page4">业务</a></li>
			<li data-menuanchor="page5"><a href="main.html#page5">关于</a></li>
			<li data-menuanchor="page6"><a href="main.html#page6">联系</a></li>
			
		</ul>
		</div>
		<ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <img src="../images/p_pp.jpg"> <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="p.html">系统</a></li>
                    <li class="divider"></li>
                    <li><a href="home.html">个人中心</a></li>
                    <li class="divider"></li>
                    <li><a href="feedback.html">个人反馈</a></li>
                </ul>
            </li>
    </ul>
	</div>

	 
	</div>
</nav>
<div class="contact">
	<img src="../images/p1.png" class="img-responsive">
	<img src="../images/p2.png" class="img-responsive">
	<img src="../images/pp.png" class="img-responsive">
	<div class="block_p1"></div>
</div>
<div id="dowebok">

	<div class="section section1">
		<div class="container">
			<div class="row">
				<div class="col-sm-12">
					<div class="pp">
						<div class="col-sm-12 pmm">
							<div class="pm">
							<p>个人中心</p>
							</div>
						</div>
						<div class="col-xs-12 col-sm-12 pmpm">
							<div class="col-sm-4">
								<div class="col-xs-6 col-sm-6"><a href="#page3" id="pag"><img src="../images/p_p.jpg"></a></div>
								<div class="col-xs-6 col-sm-6"><p id="ppa"><input class="form-control" id="disabledInput" type="text" value="李先生" disabled=true ></p><span><p id="ppapa" onclick="ka('#ppa input','#ppapa')">修改名字</p><p id="ppapap" onclick="gua('#ppa input','#ppapap')">保存名字</p></span></div>
							</div>
							<div class="col-xs-12 col-sm-8">
								<div class="col-xs-8 col-sm-9"><p><img src="../images/1.png">&nbsp;<img src="../images/2.png">&nbsp;<img src="../images/o1.png"></p>
								<p id="pa"><input class="form-control" id="disabledInput" type="text" value="站在楼顶撒钱，装个有钱人。" disabled></p></div>
								<div class="col-xs-4 col-sm-3"><p id="papa" onclick="ka('#pa input','#papa')">修改签名</p><p id="papap" onclick="gua('#pa input','#papap')">保存修改</p></div>
							</div>
						</div>
						<div class="col-xs-12 col-sm-12 pmmp">
							<div class="pm">
								<ul>
									<a href="#page1"><li class="active col-xs-4 col-sm-2">个人中心</li></a>
									<a href="#page2"><li class="col-xs-4 col-sm-2">团队管理</li></a>
										<a href="#page3"><li class="col-xs-4 col-sm-2">头像设置</li></a>
								</ul>
							</div>
						</div>
						<div class="col-xs-12 col-sm-12 ppp">
							<div class="slide" id="page1">
								<div class="col-xs-12 col-sm-6 col-sm-offset-3 ppmp1">
							<form class="form-horizontal" role="form">
								<div class="form-group">
									<label for="firstname" class="col-xs-3 col-sm-2 control-label">性别</label>
									<div class="col-xs-9 col-sm-10">
										<div class="radio">
											<label>
												<input type="radio" name="optionsRadios" id="dl1" value="option1" disabled checked> 男
											</label>
											<label>
												<input type="radio" name="optionsRadios" id="dl2" value="option1" disabled > 女
											</label>
										</div>
									</div>
								</div>
								<div class="form-group">
									<label for="lastname" class="col-xs-3 col-sm-2 control-label">生日</label>
									<div class="col-xs-9 col-sm-10 form-group">
										<div class="col-xs-6 col-sm-8 pop">
											<input type="text" class="form-control" value="2000.8.1" id="dl3" readonly disabled>
											</div>

									</div>
								</div>
								<div class="form-group">
									<label for="lastname" class="col-xs-3 col-sm-2 control-label">电话</label>
									<div class="col-xs-9 col-sm-10 form-group">
                                        <div class="col-xs-10 col-sm-10 form-group">
                                            <div class="col-xs-12 col-sm-12 pop">
                                                <input type="text" class="form-control" id="dl6" value="13234213412" disabled>
                                            </div>
                                        </div>
									</div>
								</div>
								<div class="form-group">
									<label for="lastname" class="col-xs-3 col-sm-2 control-label">邮箱</label>
									<div class="col-xs-9 col-sm-10 form-group">
										<div class="col-xs-12 col-sm-12 pop">
                                                <input type="text" class="form-control" value="10153789897824@qq.com" id="dl7" disabled>
                                        </div>
									</div>
								</div>
								<div class="form-group">
									<label for="lastname" class="col-xs-3 col-sm-2 control-label">居住地</label>
                                    <div class="col-xs-9 col-sm-10 form-group">
                                        <div class="col-xs-12 col-sm-12 pop">
                                            <input type="text" class="form-control" value="山西省太原市长治路" id="dl8" disabled>
                                        </div>
                                    </div>
								</div>
								<div class="form-group">
									<label for="firstname" class="col-xs-3 col-sm-2 control-label">个人<br>简介</label>
									<div class="col-xs-12 col-sm-10">
										<textarea class="form-control" rows="3" id="dl9" disabled></textarea>
									</div>
								</div>
								<div class="form-group">
									<div class="col-xs-2 col-xs-offset-5 col-sm-offset-5 col-sm-2">
                                        <button type="button" class="btn btn-default" id="dlp" onclick="ka('#dl1,#dl2,#dl3,#dl6,#dl7,#dl8,#dl9','#dlp')">修改</button><button type="button" class="btn btn-default" id="dlpp" onclick="gua('#dl1,#dl2,#dl3,#dl6,#dl7,#dl8,#dl9','#dlpp')">保存</button>
									</div>
								</div>
							</form>
							</ul>
						</div>
							</div>
							<div class="slide" id="page2">
								<div class="col-xs-12 col-sm-12 ppmp2">
								<ul class="col-xs-12">
									<li class="col-xs-12 col-sm-12">
										<ul class="col-xs-12">
											<li class="col-xs-2 col-sm-2 col-sm-offset-1">队员</li>
											<li class="col-xs-3 col-sm-2">帐号</li>
											<li class="col-xs-2 col-sm-2">等级</li>
											<li class="col-xs-2 col-sm-2">职位</li>
											<li class="col-xs-3 col-sm-2">管理</li>
										</ul>
									</li>
									<li class="col-xs-12 col-sm-12">
										<ul class="col-xs-12">
											<li class="col-xs-2 col-sm-2 col-sm-offset-1">李先生</li>
											<li class="col-xs-3 col-sm-2">13498239219</li>
											<li class="col-xs-2 col-sm-2"><img src="../images/1.png" class="img-responsive"></li>
											<li class="col-xs-2 col-sm-2">歌手</li>
											<li class="col-xs-3 col-sm-2">管理</li>
										</ul>
									</li>
									<li class="col-xs-12 col-sm-12">
										<ul class="col-xs-12">
											<li class="col-xs-2 col-sm-2 col-sm-offset-1">李先生</li>
											<li class="col-xs-3 col-sm-2">13498239219</li>
											<li class="col-xs-2 col-sm-2"><img src="../images/1.png" class="img-responsive"></li>
											<li class="col-xs-2 col-sm-2">歌手</li>
											<li class="col-xs-3 col-sm-2">管理</li>
										</ul>
									</li>
									<li class="col-xs-12 col-sm-12">
										<ul class="col-xs-12">
											<li class="col-xs-2 col-sm-2 col-sm-offset-1">李先生</li>
											<li class="col-xs-3 col-sm-2">13498239219</li>
											<li class="col-xs-2 col-sm-2"><img src="../images/1.png" class="img-responsive"></li>
											<li class="col-xs-2 col-sm-2">歌手</li>
											<li class="col-xs-3 col-sm-2">管理</li>
										</ul>
									</li>
									<li class="col-xs-12 col-sm-12">
										<ul class="col-xs-12">
											<li class="col-xs-2 col-sm-2 col-sm-offset-1">李先生</li>
											<li class="col-xs-3 col-sm-2">13498239219</li>
											<li class="col-xs-2 col-sm-2"><img src="../images/1.png" class="img-responsive"></li>
											<li class="col-xs-2 col-sm-2">歌手</li>
											<li class="col-xs-3 col-sm-2">管理</li>
										</ul>
									</li>
									<li class="col-sm-12">
										<ul class="pagination">
											<li><a href="#">&laquo;</a></li>
											<li class="active"><a href="#">1</a></li>
											<li><a href="#">2</a></li>
											<li><a href="#">3</a></li>
											<li><a href="#">4</a></li>
											<li><a href="#">5</a></li>
											<li><a href="#">&raquo;</a></li>
										</ul>
									</li>
								</ul>
							</div>
							</div>
							<div class="slide" id="page3">
								<div class="col-xs-12 col-sm-12 ppmp3">
									<div class="col-xs-12 col-sm-7 col-sm-offset-2">
										<p><div class="col-xs-12 cont">
											<div class="imageBox">
												<div class="thumbBox"></div>
											</div>
											<div class="col-xs-12 action">
												<div class="col-xs-12 new-contentarea tc"> <a href="javascript:void(0)" class="upload-img">
													<label for="upload-file">上传图像</label>
												</a>
													<input type="file" class="" name="upload-file" id="upload-file" />
												</div>
												<input type="button" id="btnCrop"  class="col-xs-4 Btnsty_peyton" value="裁切">
												<input type="button" id="btnZoomIn" class="col-xs-4 Btnsty_peyton" value="+"  >
												<input type="button" id="btnZoomOut" class="col-xs-4 Btnsty_peyton" value="-" >
											</div>
										</div></p>
									</div>
									<div class="col-xs-12 col-sm-2 col-sm-offset-1">
										<p>
											预览头像
										</p>
										<p class="cropped1"><span></span>大头像100*100</p>
										<p class="cropped2"><span></span>小头像55*55</p>
										<p>
											<button id="fat-btn" class="btn btn-success btn-lg op" data-loading-text="Loading..."
													type="button"> 保存头像
											</button>
										</p>
									</div>
							</div>
							</div>
						</div>
						<div style="clear:both;"></div>
				</div>
			</div>
		</div>
	</div>
		</div>
</div>
<script type="text/javascript" src="../js/jquery.fullPage.min.js"></script>
<script type="text/javascript">
        $(document).ready(function() {
            $('#dowebok').fullpage({
                verticalCentered: false,
				autoScrolling: false,
				scrollingSpeed:100000000000000000,
                css3: true
            });
        });
    </script>
<script type="text/javascript">
	$(document).ready(function(){
		var time;
		$(".contact img").mouseover(function(){
			clearTimeout(time);
			$(".contact .block_p1").fadeIn(1000);


			var ind=$(this).index();
			if(ind==0){

				$(this).attr("src","../images/p1_1.png");
				$(".contact .block_p1").html("<p><b>电话：</b>123123123</p>"+
						"<p><b>地址：</b>克拉斯大陆sad类似的拉斯克</p>"+
						"<p><b>邮箱：</b>123123123@qq.com </p>"+
						"<p><b>电话：</b>123123123</p>");
				$(".contact .block_p1").css({"top":"20px"});
			}
			else if(ind==1){
				$(this).attr("src","../images/p2_2.png");

				$(".contact .block_p1").html("<img src='../images/pl.png'> "+
						"<img src='../images/pl.png'> "+
						"<img src='../images/pl.png'>  ");
				$(".contact .block_p1").css({"top":"85px"});
			}
			else if(ind==2){
				$(this).attr("src","../images/pp_p.png");

				$(".contact .block_p1").html("<img src='../images/ma.jpg'> ");
				$(".contact .block_p1").css({"top":"154px"});
			}
		});
		$(".contact img").mouseout(function() {
			time=setInterval(function(){


				$(".contact .block_p1").fadeOut(1000);

			}, 1000);
			var ind=$(this).index();
			if(ind==0){

				$(this).attr("src","../images/p1.png");

			}
			else if(ind==1){
				$(this).attr("src","../images/p2.png");


			}
			else if(ind==2){
				$(this).attr("src","../images/pp.png");

			}
		});
		$(".contact .block_p1").mouseover(function() {
			clearTimeout(time);
			$(".contact .block_p1").show();


		});
		$(".contact .block_p1").mouseout(function() {
			clearTimeout(time);
			$(".contact .block_p1").hide();


		});
		$(".contact img").click(function() {
			$(".contact .block_p1").toggle();


		});

	});
</script>
<script type="text/javascript">
	$(document).ready(function(){




	//	var h=$(".section1 .pp ul").outerHeight();
		var wh=$(window).height();
		var wp=$(".pmmp").width();
	//	$(".section1 .pp ul").css("margin-top",-h/2);
		//$(".section1 .pp").css("height",wh*0.9);
		if(wh<765){
			$(".section1 .pp").css("height","auto");
		}
		$(".section1 .ppp").css("width",wp);
		$(".pmmp .pm ul a").click(function(){
			var ind=$(this).index();
			$(".pmmp .pm ul a li").removeClass("active");
				$(".pmmp .pm ul a").eq(ind).find("li").addClass("active");


		});
		$("#pag").click(function(){
			$(".pmmp .pm ul a li").removeClass("active");
			$(".pmmp .pm ul a").eq(2).find("li").addClass("active");


		});
        var phone=$("#dl6").val();
        var dh=phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
        $("#dl6").val(dh);

        $("#dlpp").hide();
/*		$("#papa").mouseover(function(){
			$(this).css("cursor","pointer");
		});*/


	});
    function ka(pa,paa){

        if(pa.length<10){
            var t=$(pa).val();
            $(pa).removeAttr("disabled").focus().val(t);
        }else{
            $(pa).removeAttr("disabled");

        }
		$(pa).css("border","1px solid #02d8d0");
        $(paa).next().show();
        $(paa).hide();
    }
    function gua(pa,paa){
        $(pa).attr("disabled",true);
        $(paa).prev().show();
        $(paa).hide();
		$(pa).css("border","0px solid #02d8d0");
    }
</script>
<script type="text/javascript">
	$(window).load(function() {
		var options =
		{
			thumbBox: '.thumbBox',
			spinner: '.spinner',
			imgSrc: '../images/wh.jpg'
		};
		var cropper = $('.imageBox').cropbox(options);
		$('#upload-file').on('change', function(){
			var reader = new FileReader();
			reader.onload = function(e) {
				options.imgSrc = e.target.result;
				cropper = $('.imageBox').cropbox(options);
			};
			reader.readAsDataURL(this.files[0]);
			this.files = [];
		});
		$('#btnCrop').on('click', function(){
			var img = cropper.getDataURL();
			$('.cropped1 span,.cropped2 span').html('');
			$('.cropped2 span').append('<img src="'+img+'" align="absmiddle" style="width:40px;box-shadow:0px 0px 12px #7E7E7E;">');
			$('.cropped1 span').append('<img src="'+img+'" align="absmiddle" style="width:100px;box-shadow:0px 0px 12px #7E7E7E;">');
		})
		$('#btnZoomIn').on('click', function(){
			cropper.zoomIn();
		})
		$('#btnZoomOut').on('click', function(){
			cropper.zoomOut();
		})
	});
</script>
<script>
	$(function () {
		$("#dl3").calendar({
			controlId: "divDate",
			speed: 200,
			complement: true,
			readonly: true,
			upperLimit: new Date(),
			lowerLimit: new Date("2016/08/01")
		});
		$("#txtEndDate").calendar();
	});
</script>




</body>
</html>